<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <span>sdfghjkfghj</span>
            <button>删除</button>
        </li>
    </ul>
    <ul>
        <li>
            <span>sdfghjkfghj</span>
            <button>删除</button>
        </li>
    </ul>
    <ul>
        <li>
            <span>sdfghjkfghj</span>
            <button>删除</button>
        </li>
    </ul>
    <ul>
        <li>
            <span>sdfghjkfghj</span>
            <button>删除</button>
        </li>
    </ul>

    <script>

        let ul =document.querySelector('ul')
        ul.onclick=function(e){

            // 获取事件触发元素
                console.log(e.target);
                
                console.log(e.target,tagName);
                // 如果标签名是button证明是按钮
                // console.log(e.target.tagName);
                if(e.target.tagName=='BUTTON'){
                    e.target.parentNode.remove()
                    // this remove()
                if (e.target,tagName=='span') {
                    e.target.style.color='red'
                }
                    
           }   
        } 
    </script>
</body>
</html>